<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                  <Col span="24">
                    <Row>
                      <Form-item prop="code">
                          <Input type="text" style="width:150px" v-model="searchData.code" placeholder="编码">
                          </Input>
                      </Form-item>
                      <Form-item prop="wname">
                          <Input type="text" style="width:150px" v-model="searchData.wname" placeholder="用户名">
                          </Input>
                      </Form-item>
                      <Form-item prop="telno">
                          <Input type="text" style="width:150px" v-model="searchData.telno" placeholder="手机号">
                          </Input>
                      </Form-item>
                     <Form-item prop="sourcetype">
                          <Select v-model="searchData.sourcetype" style="width:100px" placeholder="来源类型">
                              <Option value="">全部</Option>
                              <Option value="1">{{ $t('sourcetype_1') }}</Option>
                              <Option value="2">{{ $t('sourcetype_2') }}</Option>
                          </Select>
                      </Form-item>
                      <Form-item prop="evaluatetype">
                          <Select v-model="searchData.evaluatetype" style="width:100px" placeholder="评论类型">
                              <Option value="">全部</Option>
                              <Option value="1">{{ $t('evaluatetype_1') }}</Option>
                          </Select>
                      </Form-item>
                      <Form-item prop="evaluatememo">
                          <Input type="text" style="width:200px" v-model="searchData.evaluatememo" placeholder="评价内容">
                          </Input>
                      </Form-item>
                      <Form-item prop="calltime">
                          <Date-picker v-model="searchData.evaluatetime" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
                          placeholder="电话时间段" style="width: 300px" @on-change="evaluatetimeChange"></Date-picker>
                      </Form-item>
                      <Form-item>
                        <Button type="primary" @click="search" :loading="loading">
                          <span v-if="!loading">搜索</span>
                          <span v-else>加载中</span>
                        </Button>
                      </Form-item>
                    </Row>
                  </Col>
                </Form>
            </Col>
            <Col span="24">
                <Table :columns="column" :data="list"></Table>
                <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                    @on-change="pageChange" @on-page-size-change="sizeChange"
                show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
    </div>
</template>
<script>
import { getlistevaluateforadmin } from '@/api/other'
import { isNull } from '@/libs/tools'
export default {
  name: 'evaluatelist',
  data () {
    var self = this
    return {
      loading: false,
      showdetail: false,
      detailinfo: false,
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '来源类型',
          key: 'sourcetype',
          width: 100,
          render: function (h, params) {
            const sourcetype = self.$t('sourcetype_' + params.row.sourcetype)
            const html = sourcetype
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '联系类型',
          key: 'evaluatetype',
          width: 100,
          render: function (h, params) {
            const evaluatetype = self.$t('evaluatetype_' + params.row.evaluatetype)
            const html = evaluatetype
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '编码',
          key: 'code',
          width: 150,
          render: function (h, params) {
            let code = params.row.sourceid
            if (params.row.sourcetype == 1) {
              code = params.row.code
            }
            const html = code
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '状态',
          key: 'isactive',
          width: 160,
          render: function (h, params) {
            const active = !isNull(params.row.isactive) ? self.$t('isactive_' + params.row.isactive) : ''
            const html = active
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '留言用户',
          key: 'wname',
          render: function (h, params) {
            const rwname = params.row.wname ? params.row.wname : ''
            const rtelno = params.row.telno ? params.row.telno : ''
            const html = '<p>用户名：' + rwname + '</p><p>电话：' + rtelno + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          },
          width: 150
        },
        {
          title: '留言内容',
          key: 'evaluatememo'
        },
        {
          title: '评分',
          key: 'evaluatescore',
          width: 100
        },
        {
          title: '留言时间',
          key: 'evaluatetime',
          width: 170
        }
      ],
      searchData: {
        wname: '',
        telno: '',
        code: '',
        sourcetype: '',
        evaluatetype: '',
        evaluatememo: '',
        evaluatetime: []
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      }
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.loading = true
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getlistevaluateforadmin(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
        this.loading = false
      })
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    evaluatetimeChange (values) {
      this.searchData.evaluatetime = values
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
